<template>
    <div class="watch-contain">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>watch的使用</span>
            </div>
            <div class="box-content">
                <el-input v-model="firstName" placeholder="请输入姓"></el-input>
                <el-input v-model="lastName" placeholder="请输入名"></el-input>
                <p>完整的名：{{fullName}}</p>
            </div>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "watchShow",
        data() {
            return {
                firstName: '',
                lastName: '',
                fullName: ''
            }
        },
        watch: {
            firstName: function () {
                this.fullName = this.firstName + this.lastName;
            },
            lastName: function () {
                this.fullName = this.firstName + this.lastName;
            }
        }
    }
</script>

<style lang="less">
    .watch-contain {
        .text {
            font-size: 14px;
        }

        .item {
            margin-bottom: 18px;
        }

        .box-card {
            width: 480px;
            margin: 40px auto;

            .el-card__header {
                text-align: center;
            }

            .clearfix {
                display: flex;
                justify-content: center;

                span {
                    color: #0abde3;
                }
            }
        }

        .box-content {
            input{
                margin:10px auto;
            }
        }
    }
</style>